<!--
 * @Author: Damon Liu
 * @Date: 2024-11-21 10:05:58
 * @LastEditors: Damon Liu
 * @LastEditTime: 2024-11-25 10:50:48
 * @Description: 
-->
<template>
    <div style="height: calc(100% - 32px) ; display: flex; flex-direction: column; padding: 16px 0 16px 16px; ">
        <div style="height: 0; flex: 1; overflow-y: auto;">
                <a-form layout="horizontal" ref="formRef" :model="model" :label-col="{ style: { width: '100px', 'font-weight': 'bold' }  }" :wrapper-col="{ span: 16 }">
                <a-form-item label="轮播时间：" name="urlDuration">
                        <a-input-number :precision="0" v-model:value="model.urlDuration">
                            <template #addonAfter>
                                <a-select v-model:value="model.urlDurationUnit" style="width: 140px">
                                <a-select-option value="m">分钟（min）</a-select-option>
                                <a-select-option value="s">秒（sec）</a-select-option>
                                </a-select>
                            </template>
                        </a-input-number>
                </a-form-item>
                <a-form-item :label-col="{ span: 24, style: {'font-weight': 'bold' } }" :wrapper-col="{ span: 24 }" name="urls" label="轮播链接列表：" :colon="false">
                    <a-form-item-rest>
                        <div v-for="(url, urlIndex) in model.urls" style="margin: 6px 0; display: flex; ">
                            <div style="font-weight: bold;margin-right: 8px;">
                               {{ urlIndex + 1  }}. 
                            </div>
                            <div style="flex: 1;">
                                <a-textarea spellcheck="false" v-model:value="model.urls[urlIndex]" placeholder="请输入"></a-textarea>
                            </div>
                            <div style="margin: 0 12px;">
                                <a-button size="small" danger type="primary" @click="model.urls.splice(urlIndex, 1)"> 删除 </a-button>
                            </div>
                        </div>
                        <div style="margin: 12px 0; ">
                            <a-button @click="model.urls.push('')"> + 新增链接 </a-button>
                        </div>
                    </a-form-item-rest>
                </a-form-item>
                <a-form-item label="远程解析：" name="remoteJsonUrl">
                        <div style="margin: 0; display: flex;">
                            <div style="flex: 1;">
                                <a-textarea spellcheck="false" v-model:value="model.remoteJsonUrl" placeholder="远程json地址"></a-textarea>
                            </div>
                            <div style="margin: 0px;">
                                <a-form-item-rest>   
                                <a-button type="link" @click="handleGetRemote"> 解析 </a-button>
                            </a-form-item-rest>
                            </div>
                        </div>
                </a-form-item>
                <a-form-item label=" " :colon="false" name="loadUrlsWhenReload">
                    <a-checkbox v-model:checked="model.loadUrlsWhenReload">每次重启从该远程地址更新URLs</a-checkbox>
                </a-form-item>
                <a-form-item label="网页缓存管理" :colon="false" name="isClearSessionWhenLaunch">
                    <a-checkbox v-model:checked="model.isClearSessionWhenLaunch">每次重启都清除缓存</a-checkbox>
                    <template #help>
                        <a-alert type="info" message="开启后每次重启都会清除所有的缓存数据，重新从服务器获取。网速不好的情况下可能导致白屏。">

                        </a-alert>
                    </template>
                </a-form-item>
                <a-form-item label="磁盘缓存管理" name="isDiskCache">
                    <a-checkbox v-model:checked="model.isDiskCache">开启磁盘缓存</a-checkbox>
                    <template #help>
                        <a-alert type="info" message="开启磁盘缓存提高重启后加载网页的速度（当网页没有更新的时候）, 将会直接从磁盘中获取缓存数据（没有开启重启清除缓存的时候）。">

                        </a-alert>
                    </template>
                </a-form-item>
                <a-form-item label="开发者工具管理" name="isOpenDevtools">
                    <a-checkbox v-model:checked="model.isOpenDevtools">启动打开开发者工具</a-checkbox>
                    <template #help>
                        <a-alert type="error" message="仅用于调试使用，正式使用时候请关闭。">
                        </a-alert>
                    </template>
                </a-form-item>
            </a-form>
        </div>
        <div style="display: flex; white-space: nowrap; min-height: 36px;justify-content: center; padding: 16px; border-top: 1px solid #eee; ">
            <a-button type="primary" @click="handleSave"> 保存并重启 </a-button>
        </div>
    </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import axios from 'axios';
import { reactive, ref, onBeforeMount, onBeforeUnmount, toRaw } from 'vue';

const formRef = ref();

const model = ref({
    urls: [],
    loadUrlsWhenReload: false,
    remoteJsonUrl: '',
    urlDuration: '',
    urlDurationUnit: ''
});

const rules = ref({

})

onBeforeMount(async () => {
    document.title = '基础设置'
    if (window.ipcRenderer) {
        console.log(await window.ipcRenderer.getBaseSettings())
        model.value = await window.ipcRenderer.getBaseSettings()
    }
})

const handleSave = () => {
    formRef.value.validate().then( async (values) => {
        console.log(model.value)
        const res = await window.ipcRenderer.updateBaseSettings({
            ...toRaw(model.value)
        });
        if(!res.success) {
            message.error(`保存出错，错误信息: ${ typeof res.message === 'object' ? JSON.stringify(res.message) : res.message }`)
        }
    }).catch((error) => {
        console.error(error)
        message.error('表单验证出错')
    })
}

const handleGetRemote = async () => {
    const hide = message.loading('开始解析路径')
    const res = await window.ipcRenderer.getUrlsFromRemoteJson(model.value.remoteJsonUrl);
    if(res.success) {
        hide()
        message.success('解析路径成功')
        model.value.urls.splice(0, model.value.urls.length, ...res.data.urls)
    }
    else {
        message.error(res.message)
    }
}

</script>